<template>
<div class="insured">
  <div class="insured_conter">
  <div style="display: flex;justify-content: space-between">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px" style="display: flex;justify-content: space-between;align-items: flex-end">
      <div style="display: flex;flex-flow: wrap">
      <el-form-item label="实际用工单位" prop="name">
        <el-input
            v-model="queryParams.company"
            placeholder="请输入实际用工单位"
            clearable
            size="small"
            @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="被保险人" prop="name">
        <el-select v-model="queryParams.sys_id" placeholder="请选择" style="width: 215px" >
          <el-option
              v-for="dict in insured"
              :key="dict.user_id"
              :value="dict.user_id"
              :label="dict.user_name"
          >{{ dict.user_name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
          <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="timeData">
        <el-date-picker
            style="width: 240px"
            v-model="queryParams.timeData"
            type="daterange"
            range-separator="-"
            value-format="yyyy-MM-dd"
            start-placeholder="生效时间"
            end-placeholder="失效时间">
        </el-date-picker>
      </el-form-item>
      </div>
      <div>
      <el-form-item style="width: 150px;text-align: right">
        <el-button type="primary"  size="mini" @click="getList">搜索</el-button>
        <el-button type="info"  size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
      </div>
    </el-form>
    <!--      <div>-->
    <!--        <el-button type="primary" @click="getBack">返回</el-button>-->
    <!--      </div>-->
  </div>
<!--  <el-row :gutter="10" class="mb8">-->
<!--      <div>-->
<!--        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
<!--      </div>-->
<!--  </el-row>-->
  <el-table :data="listData" v-loading="loading" @selection-change="handleSelectionChange"   :header-cell-style="tableHeaderColor">
    <el-table-column type="selection" width="55" align="center"/>
    <el-table-column
        prop="company"
        align="center"
        label="实际用工单位" fixed min-width="300px">

    </el-table-column>
    <el-table-column
        prop="four_down"
        align="center"
        label="1-3类/人" min-width="120px">
<!--      <template slot-scope="scope">-->
<!--        <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            v-hasPermi="['Insurance:review_member_list:details']"-->
<!--            @click="getType(scope.row)"-->
<!--        >{{ scope.row.four_down ? scope.row.four_down + '人' : scope.row.four_down }}-->

<!--        </el-button>-->
<!--      </template>-->
    </el-table-column>
    <el-table-column
        prop="four_down_rate"
        align="center"
        label="1-3类占比/%"  min-width="120px">
    </el-table-column>
    <el-table-column
        prop="four"
        align="center"
        label="4类/人"  min-width="120px">
<!--      <template slot-scope="scope">-->
<!--        <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            v-hasPermi="['Insurance:review_member_list:details']"-->
<!--            @click="getType1(scope.row)"-->
<!--        >{{ scope.row.four ? scope.row.four + '人' : scope.row.four }}-->
<!--        </el-button>-->
<!--      </template>-->
    </el-table-column>
    <el-table-column
        prop="four_rate"
        align="center"
        label="4类占比/%"  min-width="120px">

    </el-table-column>
    <el-table-column
        prop="four_up"
        align="center"
        label="4类以上/人"  min-width="120px">
<!--      <template slot-scope="scope">-->
<!--        <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            v-hasPermi="['Insurance:review_member_list:details']"-->
<!--            @click="getType2(scope.row)"-->
<!--        >-->
<!--          {{ scope.row.four_up ? scope.row.four_up + '人' : scope.row.four_up }}-->
<!--        </el-button>-->
<!--      </template>-->
    </el-table-column>
    <el-table-column
        prop="four_up_rate"
        align="center"
        label="4类以上占比/%"  min-width="120px">
    </el-table-column>
            <el-table-column
                align="center"
                label="操作"  min-width="120px" fixed="right">
              <template slot-scope="scope">
                <el-button
                    style="color: #0095FF"
                    size="mini"
                    type="text"
                    v-hasPermi="['Insurance:company_user:detail']"
                    @click="getUser(scope.row)"
                >查看详情
                </el-button>
              </template>
            </el-table-column>
  </el-table>
  </div>
  <div style=" color: #1e1e1e;margin-top: 20px" v-if="user_count!=0">
    共 {{user_count}}人
  </div>
<!--  <div style="display: flex;justify-content:space-between">-->

    <div >
      <pagination
          style="background: transparent"
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
      />
<!--    </div>-->


  </div>

</div>
</template>

<script>
import {company_user} from "@/api/insurancemanagement/InsuredPersonnel"
import { seacond_admin } from "@/api/insurance/user";
import log from "../../monitor/job/log";
export default {
  name: "index",
  data(){
    return{
      ids:[],
      loading:true,
      // 显示搜索条件
      showSearch: true,
      queryParams:{
        user_id:'',//当前操作人
        pageSize:10,//每页条数
        pageNum:1,//页码
        company:'',//用工单位
        sys_id:'',
        timeData:[],//时间
        status:'',//状态
      },
      insured: '',//被保险人
      total:0,//总条数
      // 展示数据
      listData:[],
      user_count:0,//总人数
      queryParams1: {
        user_id: '',
        role_id: '',
      },
      statusOptions:[]
    }
  },
  created() {
    this.queryParams.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
    var user = JSON.parse(localStorage.getItem('userInfo'));
    this.queryParams1.user_id = user.userId;
    if (user.roles.length != 0) {
      this.queryParams1.role_id = user.roles[0].roleId
    }
    this.getDicts("user_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getList();
    seacond_admin(this.queryParams1).then(res => {
      this.insured = res.data;
      // console.log('被保险人数据', res)
    })
  },
  methods:{
    /* 修改表头颜色 */
    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #304156;color: #fff;font-weight: 400;font-family: Microsoft YaHei;'
      }
    },
    //重置
    resetQuery(){
     this.queryParams.company='';
     this.queryParams.sys_id='';
     this.queryParams.timeData='';
     this.queryParams.status='';

      this.getList();
    },
    getList(){
      // console.log('queryParams',this.queryParams)
      this.loading=true;
      company_user(this.queryParams).then(res=>{
        this.loading=false;
         this.listData=res.data.data;
        this.total=res.data.count;
        this.user_count=res.data.user_count
       // console.log('res',res)
      })
    },
    //点击查看按钮跳转到
    getUser(row){
      console.log('row',row)
      var obj={
        company:row.company,
        timeData:this.queryParams.timeData,
        status:this.queryParams.status
      }
       this.$router.push({
         path:'/business/user/index',
         query:{
           info:obj,
         }
       })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log('selection',selection)
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      // if (this.userList.length==selection.length){
      //   this.delList.customer_id=''
      //   this.delList.type=1;
      //   this.queryParams2.customer_id='';
      //   this.queryParams2.is_all=1;
      // }else{
      //   this.queryParams2.is_all=0;
      //   this.queryParams2.customer_id=this.ids
      //   this.delList.customer_id=this.ids
      //   this.delList.type=2;
      // }
    },
  },

}
</script>

<style scoped lang="scss">
.insured{
  margin: 20px;
  .insured_conter{
    background: #F8FBFF;
    padding:30px;
    border-radius: 10px;
    box-sizing: border-box;
  }
}
</style>
